<script>
import InstitutionSelect from '@/components/institutionSelect/institutionSelect.vue'
import SlUpload from '@/components/SlUpload/SlUpload.vue'

export default {
  name: 'vehicleBasicForm',
  components: { SlUpload, InstitutionSelect },
  data() {
    return {
      formData: {},
      carModelsList: [],
      fileList: []
    }
  },
  methods: {
    /*
    *
    * 获取车辆详情的回调函数
    *  */
    async fetchVehicleDetail() {
      try {
        const detail = await this.$store.dispatch('vehicleListStore/fetchVehicleDetailAction', this.id)
        this.formData = detail
        this.fileList.push({ url: detail.picture.split(',')[0] })
        this.fileList.push({ url: detail.picture.split(',')[1] })
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    *获取车辆类型分页数据的回调函数
    *  */
    async fetchCarModelsList() {
      try {
        const carModelsList = await this.$store.dispatch('carModelsStore/fetchCarModelsListAction', { page: 1, pageSize: 100 })
        this.carModelsList = carModelsList
      } catch (error) {
        this.$message.error(error.message)
      }
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  mounted() {
    this.fetchVehicleDetail()
    this.fetchCarModelsList()
  },
  watch: {
    fileList: {
      handler(newValue, oldValue) {
        this.formData.picture = newValue.map(item => item.url).join(',')
      },
      immediate: true
    }
  }
}
</script>

<template>
  <div class="vehicle-basic-form">
    <el-form inline :model="formData">
      <el-form-item label="车辆编号：">
        <el-input placeholder="请输入车辆编号" v-model="formData.id"></el-input>
      </el-form-item>
      <el-form-item label="车牌号码：">
        <el-input placeholder="请输入车牌号码" v-model="formData.licensePlate"></el-input>
      </el-form-item>
      <el-form-item label="车型名称：">
        <el-select v-model="formData.truckTypeId">
          <el-option v-for="(item) in carModelsList"  :value="item.id" :label="item.name" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车辆体积：">
        <el-input placeholder="请输入车辆体积" v-model="formData.allowableVolume"></el-input>
      </el-form-item>
      <el-form-item label="车辆载重：">
        <el-input placeholder="请输入车辆载重" v-model="formData.allowableLoad"></el-input>
      </el-form-item>
      <el-form-item label="GPSID">
        <el-input placeholder="请输入GPSID" v-model="formData.deviceGpsId"></el-input>
      </el-form-item>
      <el-form-item label="车辆图片" style="width: 100%; display: flex;align-items: center;">
        <sl-upload v-model="fileList"></sl-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.el-form-item {
  width: 380px;
  margin: 8px 0;

  .el-input {
    width: 130%;
  }
  .el-select{
    width: 120%;
  }
}
</style>
